import { reactive, readonly, ref, computed } from "vue";
// 示例1，猜猜输出结果

const state = reactive({
  firstName: "Xu Ming",
  lastName: "Deng",
});
const fullName = computed(() => { // 里面的回调是同步执行的，和vue2一样
  console.log("changed");
  return `${state.lastName}, ${state.firstName}`;
});
console.log("state ready");
console.log("fullname is", fullName.value);
console.log("fullname is", fullName.value);
const imState = readonly(state);
// imState代理state，state代理{}，其实访问的都是{}
console.log(imState === state); // false，会返回新的代理，imState不可改，但是state可改，state改变会导致imState改变

const stateRef = ref(state);
console.log(stateRef.value === state); //true

state.firstName = "Cheng";
state.lastName = "Ji";

console.log(imState.firstName, imState.lastName);
console.log("fullname is", fullName.value);
console.log("fullname is", fullName.value);

const imState2 = readonly(stateRef); // stateRef可以作为readonly的参数，其实stateRef是一个具有访问器属性的普通对象，它的value属性是具有响应式的
console.log(imState2.value === stateRef.value); // false，一个是只读的，一个是普通代理

